<template>
   <!-- 表格数据 -->
   <el-table v-loading="loading" :data="tableData">
      <el-table-column label="服务区名称" prop="areaName"/>
      <el-table-column label="出入口名称" prop="gatewayName"/>
      <el-table-column label="到访时间" prop="visitDate"/>
      <el-table-column label="进店客流" prop="customerNum"/>
      <el-table-column label="店外客流" prop="outerCustomerNum"/>
      <el-table-column label="男性顾客"   prop="customerMenNum"/>
      <el-table-column label="女性顾客"   prop="customerWomenNum"/>
      <el-table-column label="29岁以下顾客"     prop="before29Num"/>
      <el-table-column label="29-59岁顾客" prop="before59Num"/>
      <el-table-column label="60岁以上顾客" prop="after60Num"/>
   </el-table>
   <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryData.pageNum"
      v-model:limit="queryData.pageSize"
      @pagination="getList"
   />
</template>

<script setup>

import { gatewayList } from '@/api/bigData/passenger'
const { proxy } = getCurrentInstance();
const props = defineProps({
   queryParams:{
      typeof: Object,
      default: () => {}
   }
})
const queryData = reactive({
    pageNum: 1,
    pageSize: 10
});
const tableData = ref([])
const loading = ref(false);
const total = ref(0)
/** 查询角色列表 */
const getList = ()=> {
   loading.value = true;
   const queryParams = toRaw({ ...props.queryParams, ...queryData });
   gatewayList(queryParams).then(response => {
      tableData.value = response?.rows || [];
      total.value = response?.total || 0;
      loading.value = false;
   }).catch(() => {
      loading.value = false;
      proxy.$modal.msgError("获取数据，请稍后重试!");
   });
}
defineExpose({getList})
getList();
</script>
<style lang="scss" scoped>
  .app-container{
    display: flex;
    justify-content: space-between;
  }
  
</style>
